<!--
 * @Author: 冯本桥
 * @Date: 2024-10-25 14:43:05
 * @LastEditTime: 2025-06-04 15:45:23
 * @LastEditors: 冯本桥
 * @Description:
 * @FilePath: \teach_system_fe\src\views\user\editPass.vue
-->
<template lang="pug">
  el-drawer(
    :visible.sync="visibleDialog"
    custom-class="commonDrawer"
    title="修改密码"
    direction="rtl"
    append-to-body
    destroy-on-close
    modal-append-to-body
    :wrapperClosable="false"
    @click="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        size="medium"
        :fields="editpassItems"
        :submitting="submitting"
        label-width="0"
        :showBtns="false"
        :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
    .drawer-footer.tr
      el-button(type="primary" @click="submitHandle") 确定
</template>
<script>
import { modifyPassword } from '@/api/user'
import { editpassItems } from './config'
// import md5 from 'md5'
import md5 from '@/utils/md5' // 使用js-md5库进行MD5加密
export default {
  name: 'Register',
  props: {
    visible: [Boolean]
  },
  data () {
    return {
      editpassItems,
      errorMsg: '',
      submitting: false
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 提交
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      console.log(values)
      if (values.confirmPassword !== values.newPassword) {
        this.errorMsg = '两次密码不一样'
        return
      }
      this.submitting = true
      values.oldPassword = md5(values.oldPassword.trim())
      modifyPassword(values)
        .then(async (res) => {
          console.log(res)
          this.$message.success('密码修改成功！')
          this.$store.dispatch('user/logout')
        })
        .finally(() => {
          this.submitting = false
        })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
